<template>
    <div class="file-loader">
        <div class="btn">
            <input type="file"
                   name="file"
                   id="file"
                   @change="loadFile">
        </div>
        <!-- <div class="preview">未选择文件</div> -->
    </div>
</template>

<script>
import { readExcel, sheetToJSON } from "./utils/xlsxToArray.js"
export default {
    name: "fileLoader",
    props: {},
    data () {
        return {
            msg: ""
        };
    },
    computed: {},
    methods: {
        loadFile (e) {
            let file = e.target.files[0]

            readExcel(file, (workbook) => {
                let sheetsName = workbook.SheetNames
                let firstSheet = sheetsName[0]

                console.log(firstSheet);

                let sheet = workbook.Sheets[firstSheet]
                let array = sheetToJSON(sheet).slice(0, 500)
                this.$emit('load', array)

            })

        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.file-loader {
    margin-top: 15px;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}
</style>
